<template>
	<view class="page-wrap">
		<view class="top-text">{{remark}}</view>
		<view style="margin-top: 20rpx;"></view>
		<u-image :src="codeUrl" width="690rpx" height="690rpx"></u-image>

		<view style="width: 200rpx;margin: 20rpx auto;">
			<u-button type="primary" @click="saveImage">保存收款码</u-button>
		</view>

		<u-form :model="form" ref="uForm">
			<u-form-item label-width="200rpx" label="充值金额" prop="amount">
				<u-input v-model="form.amount" placeholder="请输入金额" />
			</u-form-item>
			<u-form-item label-width="200rpx" label="上传付款凭证" prop="url">
				<!-- <u-input v-model="form.amount" placeholder="请输入金额" /> -->
				<u-upload @on-success="uploaded" upload-text="上传" @on-remove="remove" :preview-full-image="false"
					:file-list="fileList" imageMode="aspectFit" :show-progress="false" width="150rpx" height="150rpx"
					ref="uUpload" :auto-upload="true" max-count="1" :name="'img'">
				</u-upload>
			</u-form-item>
		</u-form>
		<view class="skmx" @click="handleRoute">
			<view class="s-left">
				充值记录
			</view>
			<view class="s-right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view style="padding-top: 20rpx;"></view>
		<view>充值说明</view>
		<view class=" bg_FFFFFF">
			<view class="" style="overflow-x: hidden;">
				<u-parse :html="innerHtml"></u-parse>
			</view>

		</view>
		<view style="padding-top: 20rpx;"></view>
		<u-button class="u-m-t-20" type="error" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeUrl: '',
				remark: '',
				form: {
					amount: '',
					url: '',
					code_id: ''
				},
				innerHtml: '',
				fileList: [],
				rules: {
					amount: [{
							type: 'number',
							message: '金额必须是数字',
							trigger: 'change'
						}, {
							required: true,
							message: '请输入金额',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},

					],
					url: [{
						required: true,
						message: '请上传付款凭证',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		onLoad() {
			this.getChargeCode()
			this.$api.scanChargeDescription({}, res => {
				console.log(res.data.data)
				this.innerHtml = res.data.data.text

			})
		},

		methods: {
			handleRoute(){
				uni.navigateTo({
					url:'/subcontract/rechargeRecords/rechargeRecords'
				})
			},
			// 修改头像
			uploaded(lists) {
				this.form.url = lists.path
			},
			remove(index, lists) {
				this.fileList = []
				this.form.url = ''
			},
			getChargeCode() {
				this.$api.getChargeCode({}, res => {
					this.codeUrl = res.data.data.url
					this.form.code_id = res.data.data.id
					this.remark = res.data.data.remark
				})
			},
			saveImage() {
				var that = this
				uni.getImageInfo({
					src: this.codeUrl,
					success: (res) => {
						console.log(res.path)
						uni.saveImageToPhotosAlbum({
							filePath: res.path,
							success(res) {
								uni.showToast({
									title: '保存成功'
								})

							}
						})
					}
				})


			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.getChargeAmount()
					} else {
						console.log('验证失败');
					}
				});
			},
			getChargeAmount() {
				this.$api.submitChargeCode({
					...this.form
				}, (res) => {
					console.log(res)
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							callback: cal => {
								uni.navigateBack()
							}
						})
					}
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.page-wrap {
		padding: 20rpx 30rpx;
	}

	.top-text {
		text-align: center;
	}
	.skmx {
		/* width: 90%; */
		margin: 20rpx 0rpx;
		padding: 30rpx 0rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
	}
</style>